import React from 'react';
import { Table, Divider, message, Modal } from 'antd';
import { inject, observer } from 'mobx-react';

const confirm = Modal.confirm;

function Main({ store }) {
  const onTableChange = pagination => {
    store.paginationHandler(pagination.current, pagination.pageSize);
  };

  const onDeleteCfg = record => {
    confirm({
      title: '确认删除这个系统参数吗？',
      async onOk() {
        await store.deleteCfg(record);
        message.success('删除系统参数成功！');
      },
    });
  };

  const pagination = {
    showSizeChanger: true,
    pageSize: store.cfgList.pageSize,
    current: store.cfgList.pageNo,
    pageSizeOptions: ['10', '20', '50', '100'],
    total: store.cfgList.total,
    showQuickJumper: true,
  };

  const columns = [
    { title: '所属分类', dataIndex: 'categoryName', key: 'categoryName', width: 150 },
    { title: '参数名称', dataIndex: 'name', key: 'name', width: 250 },
    { title: '参数标识', dataIndex: 'key', key: 'key', width: 280 },
    { title: '参数值', dataIndex: 'value', key: 'value', width: 220 },
    { title: '参数描述', dataIndex: 'remark', key: 'remark' },
    {
      title: '操作', width: 200, align: 'center', render: (text, record) => {
        let disabled = record.isFixed ? 'disabled' : null;
        return (<span>
            <a onClick={() => store.showCfgDialog(record)}>编辑</a>
            <Divider type="vertical"/>
            <a disabled={disabled} onClick={() => onDeleteCfg(record)}>删除</a>
          </span>);
      },
    }];
  return (
    <div>
      <Table rowKey="id" size={'middle'} columns={columns} dataSource={store.cfgList.dataSource}
             loading={store.cfgList.loading} onChange={onTableChange}
             pagination={pagination}/>
    </div>
  );
}

export default inject('store')(observer(Main));
